<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>select</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<meta name="viewport" content="width=1080">
	<link rel="stylesheet" href="./img/mobble.js">
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
	<style type="text/css">
	    *{
	    	padding:0;
	    	margin:0;
	    } 
	    div {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
	    body{
	    	background-color: #e3e3e3;
	    }
		.container{
			width: 242px;
			height: 327px;
			float: left;
		}
		.body_height{
			width: 100%;
			height: 56px;
			border:none;
			outline: none;
			text-indent: 30px;
			background-color: #f1f1f1;
			color: #626262;
			font-size: 27px;
			font-weight: bold;
			border-radius: 7px;
			background-image: url('./img/select.png');
			background-position:95% 50%;
			background-repeat: no-repeat;
			background-size: 7%;
		}
		.box_number{
			height: 266px;
			width: 100%;
			overflow-y: scroll;
		}
		.box_number>span{
			width: 100%;
			height: 37px;
			display: block;
			line-height: 30px;
			text-indent: 30px;
		}
		.wapper_bottom{
			width: 100%;
			height: 542px;
			position: absolute;
			bottom: 0;
			left: 0;
			background-color: #fff;
			cursor: pointer;
		}
		.title{
			font-size: 35px;
			color: #bababa;
			text-align: center;
			line-height:40px;
			margin-top: 32px;
		}
		.box_number::-webkit-scrollbar {
            width: 11px;    
            height: 11px; 
        }
        .box_number::-webkit-scrollbar-thumb {
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #e3e3e3;
        }
        .box_number::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 20px;
            height: 80%;
            background: #f1f1f1;
        }
        .box_side{
        	padding-right:10px;
        	padding-top:10px;
        	padding-bottom:10px;
        	border-radius: 7px;
        	box-shadow: 0 0 10px -1px #ccc;
        	display: none;
        }
        .con{
        	width: 862px;
        	height: 327px;
        	margin:56px auto 0;
        }
        .two{
        	margin:0 60px;
        }
	</style>
</head>
<body>
	<!-- 创建下拉选的容器 -->
	<div class="wapper_bottom">
		<p class="title">请选择您的体形数据</p>
		<div class="con">
			<div class="container">
				<input type="text" class="body_height" readonly="readonly" id='pople_height' placeholder="身高 cm">	
				<div class='box_side first'>
					<div class="box_number" id="box_height"></div>
				</div>
			</div>
			<div class="container two">
				<input type="text" class="body_height" readonly="readonly" id='body_weight' placeholder="体重 kg">	
				<div class='box_side second'>
					<div class="box_number" id="box_weight"></div>
				</div>
			</div>
			<div class="container">
				<input type="text" class="body_height" readonly="readonly" id="chest" placeholder="胸围">	
				<div class='box_side third'>
					<div class="box_number" id="box_chest"></div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">

		const num={
			cm:['180','175','170','165','160','155','150','145','150'],
			kg:['180','175','170','165','160','155','150','145','150']	,
			chest:['180A','175B','170C','165B','160A','155A','150B','145D','150A']
		};
		create(num.cm,'#box_height');
		create(num.kg,'#box_weight');
		create(num.chest,'#box_chest');
		function create(num,name){
			let str = '';
			for(let i=0;i<num.length;i++){
				str+="<span>"+num[i]+"</span>";
			}
			$(name).html(str);
		}
		$('#box_height>span').click(function(){
			$('#pople_height').val(this.innerHTML+' cm');
		})	
		$('#box_weight>span').click(function(){
			$('#body_weight').val(this.innerHTML+' kg');
		})	
		$('#box_chest>span').click(function(){
			$('#chest').val(this.innerHTML);
		})	

		$('#pople_height').click(function(){
			$('.first').slideToggle(300);
		})
		$('#body_weight').click(function(){
			$('.second').slideToggle(300);
		})
		$('#chest').click(function(){
			$('.third').slideToggle(300);
		})

	</script>	
</body>
</html>